<template>
  <div class="tpl13-head">
    <section class="mobile13-header-top">
      <img :src="tplItemData.bg">
      <section class="mobile13-headerbot-le">
        <img :src="tplItemData.photo" width="65" height="65">
      </section>
      <b class="j-shopTitle">{{wxConfig.jsapi_title}}</b>
    </section>
    <section class="mobile13-headerbot">
      <section class="mobile13_headerbot_ri">
        <ul >
          <li v-for="(item,index) in tplItemData.datasets" :key="index">
            <span v-if="index==0&&item.initialize==1">{{tplItemData.itemNum}}</span>
            <span v-else-if="index==1&&item.initialize==1">{{tplItemData.newItemNum}}</span>
            <span v-else-if="index==2&&item.initialize==1">
              <img :src="item.logo" width="18" height="16">
            </span>
            <span v-else-if="index==3&&item.initialize==1">
              <img :src="item.logo" width="18" height="16">
            </span>
            <span v-else>
              <img :src="item.pic" width="18" height="16">
            </span>
             <a @click="openLink(item.link)" :style="{'color':item.titleColor}">{{item.showtitle}}</a>
          </li>
        </ul>
      </section>
    </section>
    <section class="mobile13_nav">
      <ul>
        <li v-for="(item, index) in tplItemData.PModules" :key="index" class="g-box">
          <a @click="openLink(item.link)"
             class="mobile13_navle"
             :style="`background-color: ${item.bgColor}`">
            <span>{{ item.subtitle }}</span>
            <p>{{ item.showtitle }}<b></b></p>
          </a>
          <a @click="openLink(item.link)" class="mobile13_navri g-flex">
            <img :src="item.pic">
            <div class="banner13_tit"><strong>{{ item.picname }}</strong><i>></i></div>
          </a>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { openPage } from '@/utils/utils'
export default {
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
  }
}
</script>

<style lang="scss">
  .tpl13-head{
    .mobile13-header-top{
      width: 100%;
      height: auto;
      overflow: hidden;
      position:relative;
      // border-bottom: #04153c solid 8px;
      img{
        width: 100%;
        display: block;
      }
      b{
        position: absolute;
        top: 224px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 26px;
        color: #fff;
      }
      .mobile13-headerbot-le{
        position: absolute;
        // top: 17%;
        top:60px;
        left: 50%;
        transform: translateX(-50%);
        width: 130px;
        height: 130px;
        padding: 4px;
        background: #fff;
        border-radius: 50%;
        overflow: hidden;
        img{
          height:100%;
          border-radius: 50%;
        }
      }
    }
    .mobile13-headerbot{
      width: 100%;
      height: 88px;
      position: relative;
      margin-top: 10px;
      .mobile13_headerbot_ri{
        ul {
          li{
            float: left;
            width: 25%;
            text-align: center;
            overflow: hidden;
            background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl7/header3.jpg) no-repeat right;
            background-size:2px 54px;
            &:last-child{
              background:transparent;
            }
            span{
              display: block;
              height: 36px;
              line-height: 34px;
              color: #a88c5c;
              margin-top: 4px;
              font-size: 28px;
            }
            a{
              display: block;
              color: #404040;
              line-height: 36px;
              margin-top: 4px;
            }
          }
        }
      }
      
    }
    .mobile13_nav{
      margin:3%;
      overflow: hidden;
    }
    .mobile13_nav ul li{
      width: 100%;
      margin-bottom: 3%;
      overflow: hidden;
      display: flex;
    }
    .mobile13_navle{
      display: block;
      flex: 0 200px;
      /*height: 93px;*/
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .mobile13_navle span{
      display: block;
      width: 70%;
      // text-align: center;
      margin-left: 24%;
      color: #fff;
      font-size: 26px;
      // padding-top: 38%;
      font-family: "黑体";
    }
    .mobile13_navle p{
      width: 70%;
      line-height: 36px;
      color: #fff;
      // text-align: center;
      margin-left: 24%;
      position: relative;
      padding-top: 10px;
      // font-size: 13px;
    }
    .mobile13_navle p b{
      display: none;
      width: 24px;
      height: 24px;
      background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl7/index13-5.png) no-repeat;
      background-size: 24px;
      vertical-align: middle;
      position: absolute;
      top: 6px;
      right: 30px;
    }
    .mobile13_navle.colA{
      background: #ffba00;
    }
    .mobile13_navle.colB{
      background: #ed5a5a;
    }
    .mobile13_navle.colC{
      background: #00a5e7;
    }
    .mobile13_navle.colD{
      background: #fe5a00;
    }
    .mobile13_navri{
      flex: 1;
      margin-left: 1%;
      height: 100%;
      overflow: hidden;
      position:relative;
      font-size: 0;
    }
    .mobile13_navri img {
      width: 100%;
      height: auto;
    }
    .mobile13_navri .banner13_tit{
      width: 80%;
      height: 60px;
      line-height: 60px;
      color: #fff;
      position:absolute;
      font-size: 24px;
      bottom: 10%;
      left: 10%;
      background:rgba(0,0,0,0.4) none repeat scroll !important;
      background: #000;
      overflow: hidden;
      // padding-left: 2%;
      strong{
        display:inline-block;
        width: 85%;
        height: 100%;
        float: left;
        text-indent: 8%;
        font-weight: normal;
      }
      i{
        display: inline-block;
        width: 15%;
        height: 100%;
        float: right;
      }
    }
  }
</style>
